<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="IT技术课程网站">
		<meta name="keywords" content="IT技术课程网站">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="images/favicon.ico" type="image/x-icon">
		<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
		<title>IT技术视频课程</title>
		<!-- 第一种方式:<base> 标签为页面上的所有链接规定默认地址或默认目标 -->
		<base th:href="@{/}">
		<!--[if lt IE 9]>
		  <script src="js/html5shiv.min.js"></script>
		  <script src="js/respond.min.js"></script>
		<![endif]-->
		<link rel="stylesheet" type="text/css" href="css/bootstrap3.min.css">
		<link rel="stylesheet" type="text/css" href="css/flat-ui.css" />
		<link rel="stylesheet" type="text/css" href="css/videoMain.css" />
		<style>
			body {
			}
		</style>
	</head>

	<body>
		<nav class="navbar navbar-inverse navbar-lg navbar-expand-lg" role="navigation">
			<a class="navbar-brand" href="indexMain.html">
				<img src="images/ITx32.png" style="width: auto;height: 25px;">
			</a>
			<a class="navbar-brand" style="padding-left: 0;" href="indexMain.html">IT技术课程网站</a>
			<div class="collapse navbar-collapse" id="navbar-collapse-01">
				<ul class="nav navbar-nav mr-auto">
					<li><a href="indexMain.html">首页</a></li>
					<li class="active"><a href="videoMain.html">视频课程</a></li>
					<li><a href="blogMain.html">博客文章</a></li>
				</ul>
				<ul class="nav navbar-nav navbar-right mr-auto">
					<li><a th:text="${session.Account.username}" href="userInfo.html" id="username-menu">用户名</a></li>
				</ul>
				<form class="navbar-form form-inline my-2 my-lg-0" action="searchInputVideo" role="search" style="margin: 0px;">
					<div class="form-group" style="margin-left: 20px;">
						<div class="input-group">
							<input class="form-control" id="navbarInput-01" name="searchText" style="width: 250px;" type="search" placeholder="输入搜索课程" required>
							<span class="input-group-btn">
								<button type="submit" class="btn"><span class="fui-search"></span></button>
							</span>
						</div>
					</div>
				</form>
			</div><!-- /.navbar-collapse -->
		</nav><!-- /navbar -->

		<!-- container -->
		<div class="container">

			<!-- 订单开始 -->
			<h4>购买课程</h4>
			<hr />
			<div class="row">
				<div class="col-sm-6 col-md-6" th:each="video:${video}">
					<div class="thumbnail">
						<a th:href="@{videoDetail?v_id={id}(id=${video.id})}">
							<img th:src="${video.vcoverurl}" style="height:350px!important;" alt="vcoverurl">
							<div class="caption">
								<h6><a th:text="${video.vtitle}">视频标题</a></h6>
								<span>￥</span><span th:text="${video.vprice}">视频价格</span>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-6 col-md-4">
					<div class="thumbnail">
						<div class="caption" style="min-height:300px!important;">
							<h6 style="margin-bottom: 10px">课程订单：</h6>
							<h6><a th:text="${video.vtitle}">视频标题</a></h6>
							<hr>
							<p th:text="${video.vdesc}">详情</p>
							<span style="font-size: 16px">支付：￥</span>
							<span style="font-size: 24px;color: #ff9f29" th:text="${video.vprice}">视频价格</span>
							<span>元</span>
							<br>
							<input type="hidden" id="v_id" th:value="${video.id}" name="v_id">
							<input type="hidden" id="u_id" th:value="${u_id}" name="u_id">
							<button class="btn btn-success" id="btn_addOrder">支付订单</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 订单结束 -->

			<!-- 购买成功提示窗口 -->
			<div class="modal fade" id="paySuccessDialog" role="dialog" aria-labelledby="dialog-title" aria-hidden="true">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="dialog-title">提示</h4>
						</div>
						<div class="modal-body">
							<div class="container-fluid">
								订单支付成功！
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-danger" id="btn_paySuccess">确 定</button>
						</div>
					</div>
					<!-- /.modal-content -->
				</div>
				<!-- /.modal-dialog -->
			</div>
		</div> <!-- /container -->
		<!-- 底部信息 -->
		<footer class="footer">
			<div class="footer-title">
				About the website
			</div>
			<hr >
			<div class="footer-content">
				<ul>
					<li><span>@Author: </span><span><a href="#fakelink">renexton@163.com</a></span></li>
					<li><span>Copyright &copy;2020 </span><span><a href="#fakelink">WSS-Studio</a></span></li>
				</ul>
			</div>
		</footer>

		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/flat-ui.js"></script>
		<script src="js/application.js"></script>
		<script>
			$(function() {
				$("#btn_addOrder").click(function() {
					var v_id = $("#v_id").val();
					var u_id = $("#u_id").val();
					var form_addOrder = {
						v_id: v_id,
						u_id: u_id
					}
					$.ajax({
						url: 'addOrder',
						type: "POST",
						data: form_addOrder,
						dataType: 'json',
						success: function (msg) {
							console.log(msg);
							if (msg.resCode == 1) {
								alert("订单支付成功！");
								window.location.href = "videoDetail?v_id="+v_id;
							} else {
								alert(msg.resultMsg);
							}
						},
						error: function (e) {
							alert("错误：" + e);
						}
					});
				});

			})
		</script>

	</body>

</html>
